<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="70%"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      title="客户详情"
      @update:visible="updateVisible"
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  style="margin-top: -10px">
            <div slot="header" class="clearfix">
                <span style="font:bold">基本信息</span>
            </div>
            <el-row :gutter="20">
                <el-col :md="8" :sm="24">
                    <el-form-item label="姓名:"  prop="realName">
                        <el-input v-model="form.realName" placeholder="请输入姓名" >
                            <template slot="append">
                              <el-select v-model="form.sex"  placeholder="性别" style="width: 80px; " class="ele-block" clearable>
                                <el-option v-for="(item, index) in sexList" :key="index" :label="item.Value" :value="item.Key" />
                              </el-select></template>
                        </el-input>
                      </el-form-item>
                     
                  </el-col>
                  <el-col :md="8" :sm="24">
                    <el-form-item label="联系电话:" prop="phone">
                        <el-input  v-model="form.phone" placeholder="请输入联系电话" />
                      </el-form-item>
                  </el-col>
                  <el-col :md="8" :sm="24">
                    <el-form-item label="电子邮箱:" prop="email">
                        <el-input  v-model="form.email" placeholder="请输入电子邮箱" />
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                <el-col :md="8" :sm="24">
                    <el-form-item label="所在城市:" prop="city">
                        <el-input  v-model="form.city" placeholder="请输入所在城市" />
                      </el-form-item>
                </el-col>
        
                <el-col :md="8" :sm="24">
                    <el-form-item label="证件号码:" prop="idNumber">
                        <el-input  v-model="form.idNumber" placeholder="请输入证件号码" />
                      </el-form-item>
                </el-col>
                <el-col :md="8" :sm="24">
                  <el-form-item label="备注说明:" prop="remark">
                    <el-input  v-model="form.remark" placeholder="请输入备注说明" />
                  </el-form-item>
                </el-col>
              </el-row>
             
              <el-card >
                <div slot="header" class="clearfix">
                    <span style="font:bold">设备信息</span>
                </div>
                <el-row :gutter="20">
                    <el-col :md="6" :sm="24">
                        <el-form-item label="设备编号:"  >{{form.customerDevice!=null?form.customerDevice.deviceCode:""}}
                           
                        </el-form-item>
                      </el-col>
                      <el-col :md="6" :sm="24"  >
                        <el-form-item label="设备名称:" >{{form.customerDevice!=null?form.customerDevice.deviceName:""}}
                          
                        </el-form-item>
                      </el-col>
                      <el-col :md="6" :sm="24" >
                        <el-form-item label="设备体积:" >{{form.customerDevice!=null?form.customerDevice.power:""}}
                          
                        </el-form-item>
                      </el-col>
                    
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :md="6" :sm="24" >
                      <el-form-item label="设备温度:" >{{form.customerDevice!=null?form.customerDevice.temperature:""}}
                        
                      </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="24" >
                      <el-form-item label="绑定日期:" >{{form.customerDevice!=null?form.customerDevice.bindDate:""}}
                        
                      </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="24" >
                      <el-form-item label="设备状态:" >{{form.customerDevice!=null?form.customerDevice.statusDesc:""}}
                        
                      </el-form-item>
                    </el-col>
                  </el-row>
            </el-card>
              <el-row :gutter="24">
                <el-col :md="24" :sm="24">
                  <el-card style="margin-top: 10px">
                      <div slot="header" class="clearfix">
                          <span style="font:bold">收货地址</span>
                      </div>
                      <el-table :data="form.customerAddressList" :border="true" style="width: 100%">
                          <el-table-column type="index" width="50" align="center" label="序号" />
                          <el-table-column label="收货人">
                            <template slot-scope="{ row }">
                                <span>{{ row.receiver }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column label="联系电话">
                            <template slot-scope="{ row }">
                                <span>{{ row.phone }}</span>
                            </template>
                          </el-table-column>
                          
                          <el-table-column label="联系地址">
                              <template slot-scope="{ row }">
                                <span>{{ row.address }}</span>
                              </template>
                          </el-table-column>
                         
                          
                      </el-table>
                  </el-card>
                </el-col>
               
            </el-row>
            
        </el-card>
    
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
   
    </div>
    </ele-modal>
  </template>
  
  <script>
    //初始化对像
    import { printThis } from 'ele-admin';
    import { QuerySexEnum } from '@/api/enummanger';
    import { QueryCustomerById} from '@/api/customermanager/customerInfomanager';
    export default {
      name: 'CustomerDeatil',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        
      },
      data() {
        return {
          // 表单数据
          form: {
            customerAddressList:[],
            customerDevice:{}
          },
          // 表单验证规则
          rules: {
           
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          sexList:[]
        };
      },
      created(){
        this.querySexEnums();
      },
      methods: {
          //性别
      async querySexEnums(){
        let sysEnums = await QuerySexEnum();
          sysEnums.map(e=>{
            this.sexList.push({Key:e.Key,Value:e.Value});
          });
        },
        doPrint() {
                printThis();  // 打印当前页面

                // 也可以设置一些参数
                /*printThis({
                    horizontal: false, // 是否横向打印
                    blank: false // 是否打开新页面打印
                });*/
            },
 
        setData(id){
            QueryCustomerById(id)
            .then((res) => {
              this.form=res;
              //this.$util.assignObject(this.form, {...res});
               
           });
        },
        /* 更新visible */
        updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
          //更新文件列表对像
        },
      },  
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data && this.data.id) {
              //赋值this.form
              this.form={ customerAddressList:[],  customerDevice:{} };
              this.setData(this.data.id);
              this.isUpdate = this.isUpdate = this.data.id !=null && this.data.id !=undefined;
            } else {
              this.form={customerAddressList:[],  customerDevice:{}}
              this.isUpdate = false;
            }
          } else {
            //移除校验结果
            this.$refs['form'].clearValidate();
            this.form = {customerAddressList:[],  customerDevice:{}};
          }
        }
      }
    };
  </script>
  